<template>
  <div class="layout">
    <!-- 主内容区域 -->
    <div class="content">
      <router-view />
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tabbar">
      <div 
        v-for="tab in tabs" 
        :key="tab.path"
        class="tab-item"
        :class="{ active: currentTab === tab.path }"
        @click="changeTab(tab.path)"
      >
        <img 
          :src="currentTab === tab.path ? tab.activeIcon : tab.icon" 
          :alt="tab.name"
          class="tab-icon"
        />
        <span class="tab-text">{{ tab.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'

// 导入图标
import tabbarHomeIcon from '@/assets/imgs/tabbar_home.svg'
import tabbarHomeActiveIcon from '@/assets/imgs/tabbar_home_active.svg'
import tabbarSeeIcon from '@/assets/imgs/tabbar_see.svg'
import tabbarSeeActiveIcon from '@/assets/imgs/tabbar_see_active.svg'
import tabbarServiceIcon from '@/assets/imgs/tabbar_service.svg'
import tabbarServiceActiveIcon from '@/assets/imgs/tabbar_service_active.svg'
import tabbarDiscoverIcon from '@/assets/imgs/tabbar_discover.svg'
import tabbarDiscoverActiveIcon from '@/assets/imgs/tabbar_discover_active.svg'
import tabbarMyIcon from '@/assets/imgs/tabbar_my.svg'
import tabbarMyActiveIcon from '@/assets/imgs/tabbar_my_active.svg'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 导航配置
const tabs = [
  {
    path: '/home',
    name: '首页',
    icon: tabbarHomeIcon,
    activeIcon: tabbarHomeActiveIcon
  },
  {
    path: '/see',
    name: '想看',
    icon: tabbarSeeIcon,
    activeIcon: tabbarSeeActiveIcon
  },
  {
    path: '/service',
    name: '服务',
    icon: tabbarServiceIcon,
    activeIcon: tabbarServiceActiveIcon
  },
  {
    path: '/discover',
    name: '发现',
    icon: tabbarDiscoverIcon,
    activeIcon: tabbarDiscoverActiveIcon
  },
  {
    path: '/my',
    name: '我的',
    icon: tabbarMyIcon,
    activeIcon: tabbarMyActiveIcon
  }
]

// 当前激活的标签
const currentTab = computed(() => route.path)

// 切换标签
const changeTab = (path) => {
  router.push(path)
}

// 应用启动时检查用户状态
onMounted(async () => {
  // 如果有token但没有用户信息，尝试刷新
  if (userStore.isLoggedIn && (!userStore.userInfo || !userStore.userInfo.name)) {
    try {
      await userStore.refreshUserInfo()
    } catch (error) {
      console.warn('刷新用户信息失败:', error)
    }
  }
})
</script>

<style scoped>
.layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  overflow-y: auto;
  background-color: #f5f5f5;
}

.tabbar {
  display: flex;
  height: 60px;
  background-color: #fff;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px 0;
  transition: all 0.3s ease;
}

.tab-item:hover {
  background-color: #f9f9f9;
}

.tab-item.active .tab-text {
  color: #409eff;
}

.tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.tab-text {
  font-size: 12px;
  color: #666;
  transition: color 0.3s ease;
}
</style>
